<template>

  <div class="app-container">

    <el-form :inline="true" :model="driverQuery" class="demo-form-inline">
<!--      <el-form-item label="讲师名称">-->
<!--        <el-input v-model="driverQuery.name" placeholder="讲师名称"></el-input>-->
<!--      </el-form-item>-->
<el-form-item >

    <el-input placeholder="请输入内容"   v-model="driverQuery.name"  class="input-with-select"    >

      <el-select v-model="driverQuery.select" slot="prepend" placeholder="请选择"   style="width: 120px">
        <el-option label="姓名"  value="1"  > </el-option>
        <el-option label="电话号码"  value="2"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="getDriverList()"></el-button>
    </el-input>
</el-form-item>


      <el-form-item >
        <router-link :to="'/basic_setting/save'">
          <el-button type="info"  icon="el-icon-edit"
          >添加</el-button>
        </router-link>
        <el-button type="primary" @click="getDriverList()">查询</el-button>
        <el-button type="warning" @click="refresh()">重置</el-button>
        <el-button type="danger" @click="removeBatch(sels)"  :disabled="this.sels.length === 0||this.disabled">全部删除</el-button>
      </el-form-item>
    </el-form>

    <el-table  :data="driverList" style="width: 100%" @selection-change="selsChange"  >


      　　　　
      <el-table-column label="序号" width="70" align="center">
        <!-- 插槽-->
        <!-- scope  代表范围，作用域是整个表格-->
        <template slot-scope="scope">
          {{(current - 1) * limit + scope.$index + 1}}
        </template>
      </el-table-column>


      <el-table-column prop="id"
        type="selection"
        width="30">

      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="text" label="部门"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="entrytime" label="入职时间"> </el-table-column>
      <el-table-column prop="driverNo" label="驾照号码"> </el-table-column>
      <el-table-column prop="type" label="驾照类型"> </el-table-column>
      <el-table-column prop="isdisable"  label="是否启用" >
        <template scope="scope">
          <p v-if="scope.row.isdisable=='1'">启用</p>
          <p v-if="scope.row.isdisable=='0'">未启用</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <!-- 提供插槽-->
        <template slot-scope="scope">
          <router-link :to="'/basic_setting/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
            >修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDriver(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        :page-size="limit"
        :current-page="current"
        layout="total, prev, pager, next,jumper"
        :total="total"
        style="padding: 30px 0 ; text-align: center"
        @current-change="getDriverList" >
      </el-pagination>
    </div>


  </div>


</template>

<script>
import driverApi from '@/api/rao_driver.js';

export default {
  name: 'list',
  data(){
    return{
      current: 1,
      limit: 4,
      driverQuery: {},
      driverList: null,
      total: 0,
      checked:false,
      zz: [0],
      sels:[],
      disabled:true,
      select:'',

    }
  },

  created(){
    this.getDriverList()
  },

  methods:{
    selsChange(sels) {
      this.sels = sels;
      for(let element of this.sels){
        this.disabled = false;
      }
    },

    removeBatch(rows){
      var ids = [];
      rows.forEach(element =>{
        ids.push(element.id)
      })
      this.$confirm('确定要删除选中的文件吗?','提示').then(() =>{
        driverApi.deleteDriver(ids).then((response) => {
          this.getDriverList()
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
      })
    },


    getDriverList(current=1){
      this.current=current
      driverApi.pageListDriverCondition(this.current,this.limit,this.driverQuery,)
        .then(response => {
          console.log("获取讲师列表成功")
          this.driverList=response.data.items
          this.total=response.data.total
        })
    },



    refresh(){
      this.driverQuery= {}
      this.getDriverList()
    },
    removeDriver(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        driverApi.deleteDriver(id).then((response) => {
          this.getDriverList()
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })

      })
    },

    handleSelectionChange(val){
      this.multipleSelection = val;
    }
  }



}
</script>

<style>

</style>
